<template>
	<view class="flex-col page">
		<view class="flex-col flex-1 group">
			<view class="home-top-bg" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
				<view :style="{height:statusBarHeight+'px'}"></view>
				<u-navbar :bgColor="setBgColor()">
					<view slot="left" class="nav-left">
						<image class="img" src="https://ysmz.scmzhc.com/static/mini/images/home/custom/logo.png"></image>
					</view>
				</u-navbar>
				<view class="flex-col top-s">
					<view class="header">
						<view class="left">
							<view class="address">
								<text style="color: #fff;">{{city}}</text>
								<!-- <image class="img" :src="staticResource('home/custom/w-bottom.png')" /> -->
							</view>
							<view class="weather" style="color: #fff;">{{weather}}</view>
						</view>
						<view class="search-box" @click="$nav(1,'/pages/search/search')">
							<image class="img" :src="staticResource('home/custom/search.png')" />
							<view class="input">商品</view>
							<view class="btn">搜索</view>
						</view>
						<view class="message">
							<image @click="$nav(1,'/pages/notice/notice')" class="img" :src="staticResource('home/custom/message.png')" />
						</view>
					</view>

					<!--顶部4功能-->
					<view class="main-nav">
						<view class="item" @click="scanAction">
							<view class="img">
								<image class="img" :src="staticResource('home/custom/nav1.png')" />
							</view>
							<view>扫一扫</view>
						</view>
						<view class="item" @click="$nav(1,'/pages/wallet/wallet')">
							<view class="img">
								<image class="img" :src="staticResource('home/custom/nav2.png')" />
							</view>
							<view>云豆包</view>
						</view>
						<view class="item" @click="$nav(1,'/pages/coupon/coupon')">
							<view class="img">
								<image class="img" :src="staticResource('home/custom/nav3.png')" />
							</view>
							<view>卡券包</view>
						</view>
						<view class="item" @click="$nav(1,'/pages/merchant/merchant_category')">
							<view class="img">
								<image class="img" :src="staticResource('home/custom/nav4.png')" />
							</view>
							<view>线下商家</view>
						</view>
					</view>
				</view>
				<!--功能块-->
				<view class="sub-nav">
					<view class="item" v-for="(item,index) in subNavs" :key="item.name" @click="subClick(index,item)">
						<view class="img">
							<image class="img" :src="item.icon" />
						</view>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>
			</view>

			
			
			
			
			<!--通知栏-->
			<view class="flex-row notice">
				<image class="notice_img" :src="staticResource('home/custom/notice_icon2.png')" />
				
				<view class="swiper">
					<uni-notice-bar @click="goNotice" style="width: 90%;" :speed="50" color="#422711"  background-color="rgba(0,0,0,0)" scrollable single :text="noticeObj.title"></uni-notice-bar>
				</view>
				

				
				<!-- <swiper class="swiper" circular vertical="true" autoplay="true" interval="3000" duration="2000">
					<swiper-item v-for="(nt,i) in noticeList" :key="i">
						<view @click="noticeItemClick(nt)" class="swiper-item">{{nt.title}}</view>
					</swiper-item>
				</swiper> -->
			</view>
			
			
			
			<!--三图-->
			<view class="ad-box" v-if="ads.length >= 3">                                                    
			    <view class="left">
			        <image class="img" :src="ads.find(item => item.identificationName == 'ad1').img" @click="adClick(ads.find(item => item.identificationName == 'ad1'))"/>
			    </view>
			    <view class="right">
			        <image class="top" :src="ads.find(item => item.identificationName == 'ad2').img" @click="adClick(ads.find(item => item.identificationName == 'ad2'))"/>
			        <image class="bottom" :src="ads.find(item => item.identificationName == 'ad3').img" @click="adClick(ads.find(item => item.identificationName == 'ad3'))"/>
			    </view>
			</view>
			
			
			

			<view style="margin-bottom: 100px;">
				
				
				
				
				
				
				<!--tab切换-->
				<u-sticky :customNavHeight="statusBarHeight" bgColor="#F5F5F5">
					<u-tabs :list="tabs" :scrollable='false'
						:current="current" @change="tabChange"
						:activeStyle="{
							color: '#000',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						></u-tabs>
				</u-sticky>
				
				<!-- <view class="tabs">
					<view class="tab" :class="tab == 1 ? 'active' : '' " @click="tabChange(1)">上新啦</view>
					<view class="tab" :class="tab == 2 ? 'active' : '' " @click="tabChange(2)">好物精选</view>
					<view class="tab" :class="tab == 3 ? 'active' : '' " @click="tabChange(3)">热卖专区</view>
					<view class="tab" :class="tab == 4 ? 'active' : '' " @click="tabChange(4)">特价商品</view>
				</view> -->


				<view class="flex-col" v-if="productList.length > 0" style="min-height: 100vh;">
					<ProductItem  :list="productList"></ProductItem>
		
					<u-loadmore margin-top="20" margin-bottom="20" :status="status" icon-type="flower"
						:load-text="loadText" />
				</view>
				
				<view v-else class="flex-col items-center" style="margin-top: 80rpx;min-height: 100vh;">
					<image src="/static/data_empty.png"></image>
					<text style="color: #c0c4cc;">暂无数据</text>
					<!-- <u-empty margin-top='120' mode="history" text="暂无数据"></u-empty> -->
				</view>
			</view>


		</view>


		<notice-pop v-model="showPop" :content="newNotice.content" :title="newNotice.title" :closeOnClickOverlay="true"
			@cancel="e=>{handleCancel('一')}" @close="e=>{handleClose('一')}" />

		<view v-if="showAdNotice" class="ad-mask" @click="closeAd">
		  <view class="ad-container" @click.stop>
			  <u-swiper
			    class="ad-container"
			    :list="adList"
			    @change="e => currentNum = e.current"
			    :autoplay="false"
			    indicatorStyle="right: 20px"
			    keyName="content"
			    height="400"
				bgColor="raga(0,0,0,0)"
			    imgMode="widthFix"
				@click="popAdClick"
			    >
			    <view slot="indicator" class="indicator-num">
					<text v-if="adList.length > 1" class="indicator-num__text">{{ currentNum + 1 }}/{{ adList.length }}</text>
			    </view>
			  </u-swiper>
			  <view class="ad-close-btn" @click="closeAd">✕</view>
		  </view>
		  
		</view>
		

		<Tabbar :current-page='0'></Tabbar>
	</view>
</template>

<script>
	import transition from '../../uni_modules/uview-ui/libs/config/props/transition';
	import mixin from '../../uni_modules/uview-ui/libs/mixin/mixin';
	import noticePop from '@/components/notice-pop.vue';
	import ProductItem from '@/components/product-item.vue';
	export default {
		components: {
			noticePop,
			ProductItem
		},
		data() {
			return {
				adList:[],
				currentNum:0,
				showAdNotice: false,
				showNavbar: false,
				current: 0,
				tabs:[
					{
						name:'上新啦'
					},
					{
						name:'好物精选'
					},
					{
						name:'暖心冬日'
					},
					{
						name:'特价商品'
					},
				],
				subNavs: [],
				tab: 1,
				logs: 39.912721,
				lats: 116.412893,
				city: '',
				weather: '',
				productList: [],
				ads:[],
				page:1,
				status: 'loadmore',
				loadText: {
					loadmore: '下拉加载更多...',
					loading: '加载中...',
					nomore: '没有更多数据了...'
				},
				noticeList:[],
				newNotice:{},
				showPop:false,
				imageUrl:'',
				noticeObj:{}
			}
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight+44
			},
			backgroundStyle(){
				return {
					backgroundImage: `url(${this.topBackImg})`,
					backgroundSize: 'cover',
					backgroundPosition: 'center' ,
					backgroundRepeat: 'no-repeat',
				};
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				console.log(111);
				this.showNavbar = true;
			} else {
				// console.log(222);
				this.showNavbar = false;
			}
		},
		onUnload() {
			this.showNavbar = false;
		},
		onLoad() {
			this.productList = [];
			this.page = 1;
			
			this.getHomeProduct();
			
			this.getLocation();
			this.getHomeImg();
			this.getNoticeList();
			
			this.getNewNotice();
			this.getSubNavItem();
			
			this.getAdNotice();
		},
		onShow() {
			
			// this.getHomeProduct();
		},
		onPullDownRefresh() {
			this.productList = [];
			this.page = 1;
			this.getHomeProduct();
			this.getHomeImg();
			this.getLocation();
		},
		onReachBottom() {
			this.getHomeProduct();
		},
		methods: {
			closeAd(){
				this.showAdNotice = false
			},
			popAdClick(index){
				let item = this.adList[index]
				if(item.type == 1){ ///单商品
					uni.navigateTo({
						url: '/pages/product/index?goods_id='+item.gid + '&goodsType=0'
					});
				}else if(item.type == 2){///专区
					if(item.gid == 1){
						uni.switchTab({
							url:'/pages/recommend/index'
						})
					}else if(item.gid == 2){
						uni.navigateTo({
							url:'/pages/birthday_zone/birthday_zone'
						})
					}else if(item.gid == 6){
						uni.navigateTo({
							url:'/pages/rural_zone/rural_zone'
						})
					}else if(item.gid == 8){
						uni.navigateTo({
							url:'/pages/home_sub/fc_active'
						})
					}else{
						let i = Number(item.gid) - 1;
						uni.navigateTo({
							url:'/pages/home_sub/home_sub?title='+item.title+'&index='+i
						})
					}
				}else if(item.type == 3){///活动
					uni.navigateTo({
						url: '/pages/active/index?id='+item.gid+'&name='+item.title
					})
				}else if(item.type == 4){///分类
					uni.navigateTo({
						url:'/pages/recommend/category_list?title='+item.title+'&index='+item.gid
					})
				}else if(item.type == 5){///店铺
					uni.navigateTo({
						url:'/pages/shop_home/shop_home?title=' + item.title + '&id=' + item.gid
					})
				}
			},
			getAdNotice(){
				this.$request({
					url:'?c=Index&a=newAdvertising',
					type:'post'
				}).then(res =>{
					if(res.data != null && res.data.length != 0){
						this.showAdNotice = true;
						this.adList = res.data;
					}
				})
			},
			
			getSubNavItem(){
				this.$request({
					url:'?c=Index&a=homeSectionList',
					type:'post'
				}).then(res =>{
					this.subNavs = res.data;
				});
			},
			goNotice(){
				uni.navigateTo({
					url:'/pages/notice/notice_detail?title=' + this.noticeObj.title + '&content=' + encodeURIComponent(this.noticeObj.content)
				})
			},
			// noticeItemClick(item){
			// 	uni.navigateTo({
			// 		url:'/pages/notice/notice_detail?title=' + item.title + '&content=' + encodeURIComponent(item.content)
			// 	})
			// },
			scanAction(){
				let that = this;
				uni.scanCode({
					success(res) {
						console.log('扫描结果:', res.result);
						if(res.result.startsWith('https://demo.scmzhc.com/')||res.result.startsWith('https://ysmz.scmzhc.com/')){
							const params = that.parseQueryString(res.result)
							if('sid' in params && 'type' in params){
								setTimeout(() =>{
									uni.navigateTo({
										url:'/pages/scan/scan?url=' + encodeURIComponent(res.result)
									})
								},200);
							}else if('qcode' in params && 'sign' in params){
								setTimeout(() =>{
									uni.navigateTo({
										url:'/pages/scan/scan_recharge?url=' + encodeURIComponent(res.result)
									})
								},200);
							}else{
								console.log('非扫码支付')
							}
						}else{
							console.log('非扫码支付')
						}
					},
					fail(err) {
						console.error('扫描失败:', err);
					}
				})
			},
			
			parseQueryString(url) {
			  const query = {};
			  const urlParts = url.split('?');
			  
			  if (urlParts.length > 1) {
			    const queryString = urlParts[1];
			    const pairs = queryString.split('&');
			    
			    for (const pair of pairs) {
			      const [key, value] = pair.split('=');
			      query[decodeURIComponent(key)] = decodeURIComponent(value || '');
			    }
			  }
			  
			  return query;
			},
			
			
			handleCancel(e) {
				
			},
			handleClose(e) {
				
			},
			getNewNotice(){
				this.$request({
					url:'?c=Index&a=newNotice',
					type:'post',
				}).then(res =>{
					if(res.data != null){
						this.newNotice = res.data;
						this.showPop = true
					}
				})
			},
			getNoticeList(){
				this.$request({
					url:'?c=Index&a=noticeList',
					type:'post',
					data:{
						page:1,
						limit:5
					}
				}).then(res =>{
					if(res.data != null){
						let obj = res.data[0];
						this.noticeObj = obj;
						// if(res.data.length == 1){
						// 	let obj = res.data[0];
						// 	this.noticeList = res.data;
						// 	this.noticeList.push(obj)
						// }else{
						// 	this.noticeList = res.data;
						// }	
					}
				})
			},
			
			///10个功能区跳转
			subClick(index,item){
				if(index == 0){
					uni.switchTab({
						url:'/pages/recommend/index'
					})
				}else if(index == 1){
					uni.navigateTo({
						url:'/pages/birthday_zone/birthday_zone'
					})
				}else if(index == 5){
					uni.navigateTo({
						url:'/pages/rural_zone/rural_zone'
					})
				}else if(index == 7){
					uni.navigateTo({
						url:'/pages/home_sub/fc_active?title=' + item.name
					})
				}else{
					uni.navigateTo({
						url:'/pages/home_sub/home_sub?title='+item.name+'&index='+index
					})
				}
			},
			
			getHomeImg() {
				this.$request({
					url: '?c=Index&a=homeActiveList',
					type: 'post'
				}).then(res => {
					this.ads = res.data;
					this.ads.forEach(item =>{
						if(item.identificationName == 't0'){
							this.imageUrl = item.img;
							// this.imageUrl = 'https://ysmz.scmzhc.com/static/mini/images/home/custom/home_top_2.png'
						}
					});
				});
			},

			async getLocation() {
				uni.setStorageSync('local', {
					lon: this.logs,
					lat: this.lats
				});
				try {
					const res = await this.getCurrentLocation();
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.lons = res.longitude;
					this.lats = res.latitude;
					uni.setStorageSync('local', {
						lon: this.lons,
						lat: this.lats
					})
					this.getCityWeather(res.longitude,res.latitude);
				} catch (error) {
					this.getCityWeather(this.lons,this.lats);
				}
			},

			// 检查权限并获取位置
			async getCurrentLocation() {
				// 返回一个 Promise 对象，用于异步处理位置获取
				return new Promise((resolve, reject) => {
					// 调用 uni.authorize 方法检查用户是否已授权位置信息
					uni.authorize({
						scope: 'scope.userLocation', // 指定需要授权的范围为用户位置信息
						success: () => {
							// 如果用户已授权或成功授权
							uni.getLocation({
								type: 'wgs84', // 指定返回的位置坐标系为 WGS84
								success: (res) => {
									// 如果成功获取位置信息
									resolve(res); // 将位置信息通过 resolve 返回
								},
								fail: (err) => {
									// 如果获取位置信息失败
									reject(err); // 将错误通过 reject 抛出
								}
							});
						},
						fail: () => {
							// 如果用户未授权或拒绝授权
							uni.showModal({
								title: '权限提示', // 弹窗标题
								content: '需要获取您的位置信息，请前往设置开启权限', // 弹窗内容
								success: (res) => {
									// 弹窗关闭后的回调
									if (res.confirm) {
										// 如果用户点击了“确定”按钮
										uni.openSetting(); // 打开设置页面，让用户手动开启权限
									}
									// 抛出错误，提示用户拒绝授权
									reject(new Error('用户拒绝授权'));
								}
							});
						}
					});
				});
			},
			async getCityWeather(lon,lat) {
				await this.$request({
					url: '?c=Index&a=weatherInformation',
					type: 'post',
					data: {
						lat: lon,
						lng: lat
					}
				}).then(res => {
					console.log(res);
					this.city = res.data.city;
					this.weather = `${res.data.weather}${res.data.nighttemp}°/${res.data.daytemp}°`
				});
			},


			///获取首页商品列表数据
			getHomeProduct() {
				let tab = this.current + 1;
				let d = {
					goods_type : tab,
					page: this.page,
					limit:10
				};
				this.$request({
					url: '?c=Goods&a=goodsList',
					type: 'post',
					data: d
				}).then(res => {
					uni.stopPullDownRefresh();
					this.status = 'loadmore';
					if (res.data && res.data.length > 0) {
						this.productList = [...this.productList, ...res.data];
						this.page += 1;
						if (res.data.length < 10) {
							this.status = 'nomore';
						}
					} else {
						this.status = 'nomore';
					}
				})
			},

			adClick(item){
				if(item.identificationName == 'ad1'){
					this.goChildPage(item);
				}else if(item.identificationName == 'ad2'){
					this.goChildPage(item);
				}else{
					this.goChildPage(item);
				}
			},

			goChildPage(item){
				if(item.stype == 1){ ///单商品
					uni.navigateTo({
						url: '/pages/product/index?goods_id='+item.gid + '&goodsType=0'
					});
				}else if(item.stype == 2){///专区
					if(item.gid == 1){
						uni.switchTab({
							url:'/pages/recommend/index'
						})
					}else if(item.gid == 2){
						uni.navigateTo({
							url:'/pages/birthday_zone/birthday_zone'
						})
					}else if(item.gid == 6){
						uni.navigateTo({
							url:'/pages/rural_zone/rural_zone'
						})
					}else if(item.gid == 8){
						uni.navigateTo({
							url:'/pages/home_sub/fc_active'
						})
					}else{
						let i = Number(item.gid) - 1;
						uni.navigateTo({
							url:'/pages/home_sub/home_sub?title='+item.name+'&index='+i
						})
					}
				}else if(item.stype == 3){///活动
					uni.navigateTo({
						url: '/pages/active/index?id='+item.gid+'&name='+item.name
					})
				}else if(item.stype == 4){///分类
					uni.navigateTo({
						url:'/pages/recommend/category_list?title='+item.name+'&index='+item.gid
					})
				}else if(item.stype == 5){///店铺
					uni.navigateTo({
						url:'/pages/shop_home/shop_home?title=' + item.name + '&id=' + item.gid
					})
				}
			},


			staticResource(path) {
				// let randomNumber = Math.floor(Math.random() * 1000); 
				return "https://ysmz.scmzhc.com/static/mini/images/" + path;
			},
			tabChange(val) {
				this.current = val.index;
				this.productList = [];
				this.page = 1;
				this.getHomeProduct();
			},
			setBgColor() {
				if (this.showNavbar) {
					return "#1c69ff";
				} else {
					return "rgba(0,0,0,0)";
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.top-s {
		padding-top: 0rpx;
	}
	::v-deep .uni-noticebar.data-v-a1596656{
		// color: red !important; 
		padding: 3rpx 8rpx !important;
	}
	.home-top-bg {
		// background-image: url("https://ysmz.scmzhc.com/static/mini/images/home/custom/home_top_new.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.nav-left {
		.img {
			position: absolute;
			left: 25rpx;
			top: calc(50% - 23.5rpx);
			width: 147rpx;
			height: 47rpx;
		}
	}

	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 32rpx 20rpx 18rpx;

		.left {
			width: 122rpx;
			display: flex;
			flex-direction: column;
			gap: 14rpx;
			font-size: 26rpx;
			text-align: center;
			align-items: center;
			justify-content: center;

			.address {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				gap: 5rpx;
				line-height: 22rpx;

				.img {
					width: 15rpx;
					height: 9rpx;
				}
			}

			.weather {
				font-size: 18rpx;
			}
		}

		.search-box {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			height: 70rpx;
			border-radius: 35rpx;
			flex: 1;

			.img {
				width: 32rpx;
				height: 32rpx;
				margin-left: 24rpx;
				margin-right: 15rpx;
			}

			.input {
				flex: 1;
				text-align: left;
				color: #999999;
				font-size: 28rpx;
			}

			.btn {
				width: 109rpx;
				color: #32353D;
				font-size: 28rpx;
				text-align: center;
				border-left: 3rpx solid #E05151;
				line-height: 26rpx;
			}
		}

		.message {
			width: 40rpx;
			height: 40rpx;
			margin-left: 23rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.main-nav {
		display: flex;
		flex-wrap: wrap;
		padding: 60rpx 0;
		padding: 30rpx 0rpx 80rpx 0rpx;
		.item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 18rpx;
			font-size: 30rpx;
			color: #fff;

			.img {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}

	.sub-nav {
		margin-top: 80rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 58rpx 0;
		border-radius: 10rpx;
		// background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
		padding: 46rpx 0 32rpx;

		// border-radius: 10rpx;
		.item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 20rpx;

			.img {
				width: 65rpx;
				height: 65rpx;
				border-radius: 15rpx;
			}

			.name {
				color: #32353D;
				font-size: 24rpx;
			}
		}
	}

	.notice {
		// padding-top: 20rpx;
		// margin-top: 10rpx;
		// margin: 20rpx 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		height: 90rpx;
		// width: 100%;
		padding-left: 10rpx;
		padding-bottom: 10prx;
		
	}

	.swiper {
		height: 60%;
		width: 90%;
		background-color: #F9F2EA;
		margin-right: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 22rpx;
		border-radius: 8rpx;
		padding-top: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper-item {
		height: 50rpx;
		line-height: 50rpx;
		color: #000;
		padding-bottom: 20rpx;
		font-size: 25rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.notice_img {
		width: 62rpx;
		height: 52rpx;
		margin-top: 20rpx;
		// padding-right: 10rpx;
	}

	.ad-box {
		display: flex;
		gap: 20rpx;
		height: 455rpx;
		margin: 20rpx 10rpx;
		padding: 20rpx 14rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		.left {
			width: 302rpx;
			height: 100%;

			.img {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.right {
			flex: 1;
			display: flex;
			gap: 20rpx;
			flex-direction: column;

			.top {
				flex: 1;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}

			.bottom {
				flex: 1;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: 81rpx;
		padding: 22rpx 25rpx 47rpx;

		.tab {
			color: #32353D;
			font-size: 24rpx;
			position: relative;
		}

		.active {
			color: #E05151;
			font-size: 30rpx;
		}

		.active::after {
			content: ' ';
			width: 35rpx;
			height: 6rpx;
			border-radius: 3rpx;
			background-color: #E05151;
			position: absolute;
			bottom: -12rpx;
			left: calc(50% - 17.5rpx);
			position: absolute;
		}
	}

	.page {

		width: 100%;
		// overflow-y: auto;
		// overflow-x: hidden;
		height: 100%;
	}

	.group {
		// overflow-y: auto;
	}
	
	
.ad-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  // background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.ad-container {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  width: 600rpx;
  height: 700rpx;
}
.ad-image {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}
.ad-close-btn {
  position: absolute;
  // top: 16rpx;
  // right: 16rpx;
  left: 45%;
  right: 0rpx;
  bottom: -100rpx;
  color: #fff;
  font-size: 36rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
</style>